<template>
  <div>
    <Divider plain orientation="left">常用元素</Divider>
    <div class="tool-box">
      <span @click="addText">
        <img
          class="icon"
          src="../assets/icons/text.png"
          width="26"
          height="26"/>
      </span>
      <span @click="addTextBox">
        <img
            class="icon"
            src="../assets/icons/textBox.png"
            width="26"
            height="26"/>
      </span>
      <span @click="addRect">
        <img
            class="icon"
            src="../assets/icons/rect.png"
            width="26"
            height="26"/>
      </span>
      <span @click="addCircle">
        <img
            class="icon"
            src="../assets/icons/circle.png"
            width="26"
            height="26"/>
      </span>
      <span @click="addTriangle">
        <img
            class="icon"
            src="../assets/icons/triabgle.png"
            width="26"
            height="26"/>
      </span>
    </div>
<!--    <Divider plain orientation="left">快捷导航</Divider>-->
<!--    <div>-->
<!--      <a href="https://color.uisdc.com/pick.html" target="_blank">配色</a>-->
<!--      <Divider type="vertical" />-->
<!--      <a href="https://www.svgrepo.com/" target="_blank">素材</a>-->
<!--      <Divider type="vertical" />-->
<!--      <a href="https://unsplash.com/" target="_blank">图片</a>-->
<!--      <Divider type="vertical" />-->
<!--      <a-->
<!--        href="https://www.pexels.com/zh-cn/search/%E8%83%8C%E6%99%AF/"-->
<!--        target="_blank"-->
<!--        >背景</a-->
<!--      >-->
<!--    </div>-->
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid';
import {fabric} from "fabric";

const defaultPosition = {
  left: 100, top: 100, shadow: '', fontFamily: 'arial'
}
export default {
  name: 'ToolBar',
  inject: ['canvas', 'fabric'],
  data() {
    return {
    };
  },
  methods: {
    addText() {
      const text = new this.fabric.IText('文字', {
        ...defaultPosition,
        fontSize: 40, id: uuid(),
      });
      this.canvas.c.add(text)
      this.canvas.c.setActiveObject(text);
    },
    addTextBox() {
      const text = new this.fabric.Textbox('文字输入框', {
        ...defaultPosition,
        splitByGrapheme: true, width: 300,
        fontSize: 40, id: uuid(),
      });
      this.canvas.c.add(text)
      this.canvas.c.setActiveObject(text);
    },
    addTriangle() {
      const triangle = new this.fabric.Triangle({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '#92706B'
      })
      this.canvas.c.add(triangle)
      this.canvas.c.setActiveObject(triangle);
    },
    addCircle() {
      const circle = new this.fabric.Circle({
        ...defaultPosition,
        radius: 50,
        fill: '#57606B',
        id: uuid(),
        name: '圆形'
      });
      this.canvas.c.add(circle)
      this.canvas.c.setActiveObject(circle);
    },
    addRect() {
      const circle = new this.fabric.Rect({
        ...defaultPosition,
        fill: '#F57274',
        width: 100,
        height: 100,
        id: uuid(),
        name: '矩形'
      });
      this.canvas.c.add(circle)
      this.canvas.c.setActiveObject(circle);
    },
  }
};
</script>

<style scoped lang="less">
.tool-box {
  display: flex;
  justify-content: space-around;
  span {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    background: #f6f6f6;
    margin-left: 2px;
    cursor: pointer;
    &:hover {
      background: #edf9ff;
      img {
        fill: #2d8cf0;
      }
    }
  }
}
.img {
  width: 20px;
}
</style>
